<template>
  <div id="samplesample">
      <!-- {{tableData.service.cName}} -->
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="客户姓名" prop="cName">
        <el-input
          v-model="form.cName"
          placeholder="请输入客户姓名"
          style="width: 260px"
        ></el-input>
      </el-form-item>

      <el-row>
        <el-col span="8">
          <el-form-item label="预估价格" prop="estimate">
            <el-input v-model="form.estimate" placeholder="请输入预估价格" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="预计完成" prop="endTime">
            <el-date-picker
              style="width: 260px"
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="8">
          <el-form-item label="产品类型" prop="devType">
            <el-select v-model="form.devType" placeholder="请选择" style="width: 260px">
              <el-option label="台式机" value="1"></el-option>
              <el-option label="笔记本" value="2"></el-option>
              <el-option label="投影仪" value="3"></el-option>
              <el-option label="打印机" value="4"></el-option>
              <el-option label="其他" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="机器品牌" prop="devBrand">
            <el-input v-model="form.devBrand" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="8">
          <el-form-item label="机器型号" prop="devMix">
            <el-input v-model="form.devMix" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="系列号" prop="series">
            <el-input v-model="form.series" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="8">
          <el-form-item label="故障类型" prop="faultType">
            <el-select style="width: 260px" v-model="form.faultType" placeholder="请选择">
              <el-option label="固定性故障" value="1"></el-option>
              <el-option label="间歇性故障" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="故障现象" prop="faultDepression">
            <el-input v-model="form.faultDepression" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="8">
          <el-form-item label="开机口令" prop="password">
            <el-input v-model="form.password" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="缺少零件" prop="lackPart">
            <el-input v-model="form.lackPart" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('form')">保存修改</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import RichText from '@/components/RichText/RichText'
import { alterService, getServiceInfo as getInfo } from "../../api/repair";
import { getMap } from "../../utils/dataStorage";
import { resolve } from 'q';
export default {
  data() {
    return {
      tableData: {},
      form: {
        cName: "",
        estimate: "",
        endTime: "",
        devType: "",
        devBrand: "",
        lackPart: "",
        password: "",
        faultDepression: "",
        faultType: "",
        series: "",
        devMix: ""
      },
      rules: {
        cName: [
          { required: true, message: "请输入客户姓名", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2~50个字符", trigger: "blur" }
        ],
        faultType: [
          { required: true, message: "请选择故障类型", trigger: "change" }
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        devType: [
          { required: true, message: "请选择产品类型", trigger: "blur" }
        ],
        estimate: [
          { required: true, message: "请输入预估价格", trigger: "blur" }
        ],
        devBrand: [
          { required: true, message: "请输入机器品牌", trigger: "blur" }
        ],
        devMix: [
          { required: true, message: "请输入机器型号", trigger: "blur" }
        ],
        faultDepression: [
          { required: true, message: "请输入错误描述", trigger: "blur" }
        ],
        password: [
          {
            required: true,
            message: "请输入口令，若没有请输入‘无’",
            trigger: "blur"
          }
        ],
        lackPart: [
          { required: true, message: "请输入缺少的零件", trigger: "blur" }
        ],
        series: [{ required: true, message: "请输入系列号", trigger: "blur" }]
      },
      checkedCities: []
    };
  },
  created() {
    this.getServiceInfo();
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 设置提交的参数
          let param = new URLSearchParams();
          param.append("sId", getMap("sId"));
          param.append("cName", this.form.cName);
          param.append("estimate", this.form.estimate);
          param.append("devType", this.form.devType);
          let time = this.form.endTime;
          let year = time.getFullYear();
          let month = time.getMonth() + 1;
          let day = time.getDate();
          time = year + "-" + month + "-" + day;
          param.append("endTime", time);
          param.append("devBrand", this.form.devBrand);
          param.append("lackPart", this.form.lackPart);
          param.append("password", this.form.password);
          param.append("faultDepression", this.form.faultDepression);
          param.append("faultType", this.form.faultType);
          param.append("series", this.form.series);
          param.append("devMix", this.form.devMix);
          alterService(param)
            .then(r => {
              this.$router.push({ path: "/service_sure" });
            })
            .catch(_ => {
              console.log(r);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    getServiceInfo() {
      let sId = getMap("sId");
      let param = new URLSearchParams();
      param.append("serviceId", sId);
      let that = this;
      getInfo(param)
        .then(r => {
          console.log(r);
          this.form.cName = r.service.cName;
          this.form.estimate=r.service.estimate;
          this.form.endTime = new Date(r.service.endTime);
          this.form.devMix = r.device.devMix;
          this.form.devType = r.device.devType + "";
          this.form.devBrand = r.device.devBrand;
          this.form.lackPart = r.device.lackPart;
          this.form.password = r.device.password;
          this.form.faultDepression = r.device.faultDepression;
          this.form.faultType = r.device.faultType + "";
          this.form.series = r.device.series;
        })
        .catch(_ => {
          console.log(_);
        });
    }
  }
};
</script>